<template>
  <div class="songList">
    <div>
      <van-list
        v-model="loadings"
        :finished="finished"
        finished-text="我是有底线的..."
        @load="onLoad"
      >
        <van-row type="flex" class="box">
          <van-col
            span="6"
            v-for="(item, index) in songs"
            :key="index"
            @click="toDetail(item.id)"
          >
            <van-image
              radius=".3125rem"
              width="80"
              height="80"
              lazy-load
              :src="item.coverImgUrl + '?param=200y200'"
            >
            <span class="playCount">
              <span class="iconfont">&#xe628;</span>
              <span v-if="Math.floor(item.playCount) >= 100000000">{{ Math.floor(item.playCount / 100000000) }} 亿</span>
              <span v-else>{{ Math.floor(item.playCount / 10000) }} 万</span>
            </span>
            </van-image>
            <span class="van-multi-ellipsis--l2">{{ item.name }}</span>
          </van-col>
        </van-row>
      </van-list>
    </div>
  </div>
</template>

<script>
import { GetTopPersonalizedAPI } from "@/api/api.js";
export default {
  name: "Chinese",
  data() {
    return {
      songs: [],
      show: true,
      loadings: false,
      finished: false,
      page: 0,
      lasttime: 0,
      limit: 0,
    };
  },
  mounted() {},

  methods: {
    onLoad() {
      // 异步更新数据
      let offset = this.lasttime;
      GetTopPersonalizedAPI({ before: offset, limit: 15, cat: "华语" }).then(
        (res) => {
          if (res.status == 200) {
            this.songs = [...this.songs, ...res.data.playlists];
            this.lasttime = res.data.lasttime;
          }
          // 加载状态结束
          this.loadings = false;
          // 数据全部加载完成
          if (this.songs.length >= 73) {
            this.finished = true;
          }
        }
      );
    },
    toDetail(id) {
      this.$router.push({
        path: "/MusicDetail",
        query: { id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  .van-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.3125rem;
    font-size: 0.75rem;
    .van-image {
      position: relative;
      .playCount {
        position: absolute;
        top: .1875rem;
        right: .1875rem;
        color: #fff;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 3.125rem;
        padding: 0rem .2188rem;
        .iconfont {
          font-size: .75rem;
        }
      }
    }
  }
}
.songList /deep/ .van-nav-bar__content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  background-color: #fff;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 2.875rem;
}
</style>